/*
 * LaborCheck UI Foundation · LC-SYSTEM-001
 *
 * Esta hoja se carga ANTES de styles.css. Define el contrato global nuevo sin
 * sobrescribir todavía los componentes históricos. La migración debe hacerse
 * componente por componente y eliminar la regla anterior solo después de QA.
 * styles-propuesta-b.css permanece independiente y no gobierna este sistema.
 */

:root {
  /* Color semántico */
  --ui-color-primary: #0b2b68;
  --ui-color-deep: #061d47;
  --ui-color-accent: #08b8cf;
  --ui-color-accent-text: #087f90;
  --ui-color-text-primary: #102242;
  --ui-color-text-secondary: #60708a;
  --ui-color-text-inverse: #ffffff;
  --ui-color-text-inverse-muted: #d8e5f3;
  --ui-color-background: #f4f8fc;
  --ui-color-surface: #ffffff;
  --ui-color-border: #dfe7f2;
  --ui-color-success: #0c765f;
  --ui-color-success-soft: #effbf8;
  --ui-color-warning: #ff671d;
  --ui-color-warning-soft: #fff4e9;
  --ui-color-error: #b92f47;
  --ui-color-error-soft: #fff3f5;
  --ui-color-accent-secondary: #6549c9;
  --ui-color-accent-secondary-soft: #f0edfb;

  /* Tipografía: desktop */
  --ui-font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-font-display: 3.75rem; /* 60px */
  --ui-font-page-h1: 3rem; /* 48px */
  --ui-font-section-h2: 3rem; /* 48px */
  --ui-font-task-h2: 1.75rem; /* 28px */
  --ui-font-card-h3: 1.25rem; /* 20px */
  --ui-font-lead: 1.125rem; /* 18px */
  --ui-font-body: 1rem; /* 16px */
  --ui-font-small: .875rem; /* 14px */
  --ui-font-label: .875rem; /* 14px */
  --ui-font-help: .875rem; /* 14px */
  --ui-font-action: 1rem; /* 16px */
  --ui-font-metric: 3.75rem; /* 60px */
  --ui-leading-display: 1.1;
  --ui-leading-title: 1.22;
  --ui-leading-lead: 1.55;
  --ui-leading-body: 1.65;
  --ui-leading-small: 1.55;
  --ui-leading-control: 1.35;
  --ui-weight-regular: 400;
  --ui-weight-medium: 500;
  --ui-weight-bold: 700;
  --ui-weight-extra-bold: 800;

  /* Escala de espacio */
  --ui-space-1: .25rem; /* 4px */
  --ui-space-2: .5rem; /* 8px */
  --ui-space-3: .75rem; /* 12px */
  --ui-space-4: 1rem; /* 16px */
  --ui-space-6: 1.5rem; /* 24px */
  --ui-space-8: 2rem; /* 32px */
  --ui-space-12: 3rem; /* 48px */
  --ui-space-16: 4rem; /* 64px */
  --ui-space-20: 5rem; /* 80px */
  --ui-space-24: 6rem; /* 96px */
  --ui-gap-label-control: var(--ui-space-2);
  --ui-gap-field: var(--ui-space-4);
  --ui-gap-card: var(--ui-space-6);
  --ui-gap-section-content: var(--ui-space-12);
  --ui-section-block: var(--ui-space-24);
  --ui-card-padding: var(--ui-space-8);

  /* Grid y lectura */
  --ui-container-standard: 73.75rem; /* 1180px */
  --ui-container-wide: 82.5rem; /* 1320px */
  --ui-reading-width: 68ch;
  --ui-gutter: 1.5rem; /* 24px */

  /* Proporciones visuales */
  --ui-split-gap: var(--ui-space-12);
  --ui-media-section-max: 42rem; /* 672px */
  --ui-avatar-primary-width: clamp(18rem, 28vw, 26rem);
  --ui-avatar-secondary-width: clamp(13rem, 22vw, 21rem);
  --ui-avatar-integrated-width: clamp(13rem, 36%, 19rem);
  --ui-visual-icon-size: 3.5rem; /* 56px */

  /* Radios, bordes y elevación */
  --ui-radius-control: .75rem; /* 12px */
  --ui-radius-card: 1rem; /* 16px */
  --ui-radius-panel: 1.5rem; /* 24px */
  --ui-radius-pill: 999px;
  --ui-border-width: 1px;
  --ui-shadow-low: 0 12px 34px rgba(12, 42, 94, .10);
  --ui-shadow-high: 0 24px 70px rgba(12, 42, 94, .12);

  /* Controles */
  --ui-control-height: 3.25rem; /* 52px */
  --ui-control-height-wide: 3.75rem; /* 60px, variante de acceso */
  --ui-control-padding-inline: var(--ui-space-4);
  --ui-focus-ring: 0 0 0 3px rgba(8, 184, 207, .24);
  --ui-transition: 160ms ease;
}

/* Base editorial global. No modifica el tamaño raíz del documento. */
body {
  font-size: var(--ui-font-body);
  line-height: var(--ui-leading-body);
}

/* Tipografía semántica: se adopta agregando la clase, no por etiqueta HTML. */
.ui-type-display,
.ui-type-page-h1,
.ui-type-section-h2,
.ui-type-task-h2,
.ui-type-card-h3,
.ui-type-metric {
  margin-block: 0;
  color: var(--ui-color-text-primary);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-weight-extra-bold);
}
.ui-type-display { font-size: var(--ui-font-display); line-height: var(--ui-leading-display); letter-spacing: -.04em; }
.ui-type-page-h1 { font-size: var(--ui-font-page-h1); line-height: var(--ui-leading-display); letter-spacing: -.035em; }
.ui-type-section-h2 { font-size: var(--ui-font-section-h2); line-height: var(--ui-leading-title); letter-spacing: -.03em; }
.ui-type-task-h2 { font-size: var(--ui-font-task-h2); line-height: var(--ui-leading-title); }
.ui-type-card-h3 { font-size: var(--ui-font-card-h3); line-height: var(--ui-leading-title); }
.ui-type-lead { font-size: var(--ui-font-lead); line-height: var(--ui-leading-lead); }
.ui-type-body { font-size: var(--ui-font-body); line-height: var(--ui-leading-body); }
.ui-type-small { font-size: var(--ui-font-small); line-height: var(--ui-leading-small); }
.ui-type-label { font-size: var(--ui-font-label); line-height: var(--ui-leading-control); font-weight: var(--ui-weight-bold); }
.ui-type-action { font-size: var(--ui-font-action); line-height: var(--ui-leading-control); font-weight: var(--ui-weight-extra-bold); }
.ui-type-metric { font-size: var(--ui-font-metric); line-height: 1; letter-spacing: -.04em; }

/*
 * Puente de cascada para componentes ya migrados. Las reglas históricas se
 * cargan después de esta hoja; esta especificidad mantiene la autoridad de los
 * roles semánticos sin !important y sin crear tamaños por página o sección.
 */
:root .ui-type-display.ui-type-display { font-size: var(--ui-font-display); line-height: var(--ui-leading-display); }
:root .ui-type-page-h1.ui-type-page-h1 { font-size: var(--ui-font-page-h1); line-height: var(--ui-leading-display); }
:root .ui-type-section-h2.ui-type-section-h2 { font-size: var(--ui-font-section-h2); line-height: var(--ui-leading-title); }
:root .ui-type-task-h2.ui-type-task-h2 { font-size: var(--ui-font-task-h2); line-height: var(--ui-leading-title); }
:root .ui-type-card-h3.ui-type-card-h3 { font-size: var(--ui-font-card-h3); line-height: var(--ui-leading-title); }
:root .ui-type-lead.ui-type-lead { font-size: var(--ui-font-lead); line-height: var(--ui-leading-lead); }
:root .ui-type-body.ui-type-body { font-size: var(--ui-font-body); line-height: var(--ui-leading-body); }
:root .ui-type-small.ui-type-small { font-size: var(--ui-font-small); line-height: var(--ui-leading-small); }
:root .ui-type-label.ui-type-label { font-size: var(--ui-font-label); line-height: var(--ui-leading-control); }
:root .ui-type-action.ui-type-action { font-size: var(--ui-font-action); line-height: var(--ui-leading-control); }
:root .ui-type-metric.ui-type-metric { font-size: var(--ui-font-metric); line-height: 1; }

/* Roles tipográficos compartidos que todavía conservan hooks históricos. */
:root:root .ui-eyebrow { font-size: var(--ui-font-label); line-height: var(--ui-leading-control); }
:root:root .ui-badge { font-size: var(--ui-font-label); line-height: var(--ui-leading-control); }
:root:root .ui-button { font-size: var(--ui-font-action); line-height: var(--ui-leading-control); }
:root:root .ui-card > h3,
:root:root .ui-card-list > section > h3 { font-size: var(--ui-font-card-h3); line-height: var(--ui-leading-title); }
:root:root .ui-card > p,
:root:root .ui-card-list > section > p { font-size: var(--ui-font-body); line-height: var(--ui-leading-body); }
:root:root .main-nav > a { font-size: var(--ui-font-action); line-height: var(--ui-leading-control); }
:root:root .site-footer { font-size: var(--ui-font-small); line-height: var(--ui-leading-small); }
:root:root .site-footer a,
:root:root .site-footer p,
:root:root .site-footer b,
:root:root .site-footer .footer-bottom { font-size: inherit; line-height: inherit; }

/* Envolventes */
.ui-container {
  width: min(var(--ui-container-standard), calc(100% - (var(--ui-gutter) * 2)));
  margin-inline: auto;
}
.ui-container--wide { width: min(var(--ui-container-wide), calc(100% - (var(--ui-gutter) * 2))); }
.ui-container--reading { max-width: var(--ui-reading-width); }

/* Composición y media: roles compartidos, no tamaños por sección. */
.ui-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--ui-split-gap);
}
.ui-split > * { min-width: 0; }
.ui-split--media-major { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.ui-split--text-major { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
:root:root .ui-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:root:root .ui-split--media-major { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
:root:root .ui-split--text-major { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }

.ui-media { min-width: 0; width: 100%; }
.ui-media img { height: auto; }
.ui-media__frame { width: 100%; max-width: none; height: auto; }
.ui-media--section .ui-media__frame { max-width: var(--ui-media-section-max); margin-inline: auto; }
.ui-media--avatar-primary { width: min(100%, var(--ui-avatar-primary-width)); height: auto; }
.ui-media--avatar-secondary { width: min(100%, var(--ui-avatar-secondary-width)); height: auto; }
.ui-media--avatar-integrated { width: min(100%, var(--ui-avatar-integrated-width)); height: auto; }
:root:root .ui-media__frame { width: 100%; max-width: none; height: auto; }
:root:root .ui-media--section .ui-media__frame { max-width: var(--ui-media-section-max); }
:root:root .ui-media--avatar-primary { width: min(100%, var(--ui-avatar-primary-width)); height: auto; }
:root:root .ui-media--avatar-secondary { width: min(100%, var(--ui-avatar-secondary-width)); height: auto; }
:root:root .ui-media--avatar-integrated { width: min(100%, var(--ui-avatar-integrated-width)); height: auto; }
.ui-visual-card { height: auto; min-height: 0; }
.ui-visual-cards > * { height: auto; min-height: 0; }
:root:root .ui-visual-card,
:root:root .ui-visual-cards > * { height: auto; min-height: 0; }
.ui-visual-icon { width: var(--ui-visual-icon-size); height: var(--ui-visual-icon-size); flex: 0 0 auto; }

/* Botones */
.ui-button {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-6);
  border: var(--ui-border-width) solid transparent;
  border-radius: var(--ui-radius-control);
  font: var(--ui-weight-extra-bold) var(--ui-font-action)/var(--ui-leading-control) var(--ui-font-family);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
}
.ui-button--primary { background: var(--ui-color-primary); color: var(--ui-color-text-inverse); }
.ui-button--primary:hover { background: var(--ui-color-deep); transform: translateY(-1px); }
.ui-button--secondary { border-color: var(--ui-color-primary); background: transparent; color: var(--ui-color-primary); }
.ui-button--secondary:hover { background: var(--ui-color-background); }
.ui-button--inverse { border-color: rgba(255,255,255,.5); background: var(--ui-color-surface); color: var(--ui-color-primary); }
.ui-button--inverse:hover { background: var(--ui-color-text-inverse-muted); }
.ui-button--text { min-height: auto; padding-inline: 0; border-radius: 0; background: transparent; color: var(--ui-color-primary); text-decoration: underline; text-underline-offset: .2em; }
.ui-button:focus-visible { outline: 2px solid var(--ui-color-accent); outline-offset: 3px; box-shadow: var(--ui-focus-ring); }
.ui-button:disabled,
.ui-button[aria-disabled="true"] { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
.ui-button.is-loading,
.ui-button[aria-busy="true"] { position: relative; cursor: wait; }
.ui-button.is-loading::after,
.ui-button[aria-busy="true"]::after {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ui-spin .8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(1turn); } }

/* Cards, etiquetas y badges */
.ui-card,
.ui-card-list > section {
  padding: var(--ui-card-padding);
  border: var(--ui-border-width) solid var(--ui-color-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-color-surface);
  color: var(--ui-color-text-primary);
  box-shadow: var(--ui-shadow-low);
}
.ui-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  color: var(--ui-color-accent-text);
  font: var(--ui-weight-extra-bold) var(--ui-font-label)/var(--ui-leading-control) var(--ui-font-family);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ui-eyebrow--inverse { color: var(--ui-color-text-inverse-muted); }
.ui-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: var(--ui-space-1) var(--ui-space-3);
  border: var(--ui-border-width) solid var(--ui-color-border);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-background);
  color: var(--ui-color-text-secondary);
  font: var(--ui-weight-bold) var(--ui-font-label)/var(--ui-leading-control) var(--ui-font-family);
}

/* Formularios */
.ui-field {
  display: grid;
  gap: var(--ui-gap-label-control);
  color: var(--ui-color-text-primary);
  font-family: var(--ui-font-family);
}
.ui-field__label,
.ui-field > label,
.ui-field > span { font-size: var(--ui-font-label); line-height: var(--ui-leading-control); font-weight: var(--ui-weight-bold); }
:root:root .ui-field__label,
:root:root .ui-field > label,
:root:root .ui-field > span { font-size: var(--ui-font-label); line-height: var(--ui-leading-control); }
.ui-field__control,
.ui-field > input,
.ui-field > textarea,
.ui-select {
  width: 100%;
  min-height: var(--ui-control-height);
  padding-inline: var(--ui-control-padding-inline);
  border: var(--ui-border-width) solid var(--ui-color-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-color-surface);
  color: var(--ui-color-text-primary);
  font: var(--ui-weight-regular) var(--ui-font-body)/var(--ui-leading-control) var(--ui-font-family);
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background-color var(--ui-transition);
}
.ui-field > textarea { min-height: 7rem; padding-block: var(--ui-space-3); resize: vertical; }
.ui-field__control:hover,
.ui-field > input:hover,
.ui-field > textarea:hover,
.ui-select:hover { border-color: var(--ui-color-text-secondary); }
.ui-field__control:focus-visible,
.ui-field > input:focus-visible,
.ui-field > textarea:focus-visible,
.ui-select:focus-visible { outline: none; border-color: var(--ui-color-accent-text); box-shadow: var(--ui-focus-ring); }
.ui-field__help,
.ui-field__error { margin: 0; font-size: var(--ui-font-help); line-height: var(--ui-leading-small); }
.ui-field__help { color: var(--ui-color-text-secondary); }
.ui-field__error { color: var(--ui-color-error); }
.ui-field.is-error .ui-field__control,
.ui-field.is-error > input,
.ui-field.is-error > textarea,
.ui-field.is-error .ui-select { border-color: var(--ui-color-error); background: var(--ui-color-error-soft); }
.ui-field__control:disabled,
.ui-field > input:disabled,
.ui-field > textarea:disabled,
.ui-select:disabled { opacity: .62; cursor: not-allowed; background: var(--ui-color-background); }
.ui-field--wide .ui-field__control,
.ui-field--wide > input,
.ui-field--wide .ui-select { min-height: var(--ui-control-height-wide); }

:root:root .ui-field__control,
:root:root .ui-field > input,
:root:root .ui-field > textarea,
:root:root .ui-select { font-size: var(--ui-font-body); line-height: var(--ui-leading-control); }
:root:root .ui-field__help,
:root:root .ui-field__error { font-size: var(--ui-font-help); line-height: var(--ui-leading-small); }

.ui-form-grid { display: grid; gap: var(--ui-gap-field); }
.ui-checkbox { display: inline-flex; align-items: flex-start; gap: var(--ui-space-2); color: var(--ui-color-text-secondary); font: var(--ui-weight-regular) var(--ui-font-small)/var(--ui-leading-small) var(--ui-font-family); cursor: pointer; }
.ui-checkbox input { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; margin: .15em 0 0; accent-color: var(--ui-color-primary); }
.ui-checkbox input:focus-visible { outline: 2px solid var(--ui-color-accent); outline-offset: 3px; }
:root:root .ui-checkbox { font-size: var(--ui-font-small); line-height: var(--ui-leading-small); }

/* Alertas */
.ui-alert {
  padding: var(--ui-space-4);
  border: var(--ui-border-width) solid var(--ui-color-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-color-background);
  color: var(--ui-color-text-primary);
  font: var(--ui-weight-regular) var(--ui-font-small)/var(--ui-leading-small) var(--ui-font-family);
}
.ui-alert--success { border-color: var(--ui-color-success); background: var(--ui-color-success-soft); color: var(--ui-color-success); }
.ui-alert--warning { border-color: var(--ui-color-warning); background: var(--ui-color-warning-soft); color: var(--ui-color-text-primary); }
.ui-alert--error { border-color: var(--ui-color-error); background: var(--ui-color-error-soft); color: var(--ui-color-error); }
.ui-alert--accent { border-color: var(--ui-color-accent-secondary); background: var(--ui-color-accent-secondary-soft); color: var(--ui-color-accent-secondary); }
:root:root .ui-alert { font-size: var(--ui-font-small); line-height: var(--ui-leading-small); }

/* Tablet: el sistema cambia escala; no reduce el cuerpo ni los controles. */
@media (max-width: 1000px) {
  :root {
    --ui-font-display: 3rem; /* 48px */
    --ui-font-page-h1: 2.625rem; /* 42px */
    --ui-font-section-h2: 2.375rem; /* 38px */
    --ui-font-task-h2: 1.75rem; /* 28px */
    --ui-font-card-h3: 1.25rem; /* 20px */
    --ui-font-lead: 1.125rem; /* 18px */
    --ui-font-body: 1rem; /* 16px */
    --ui-font-small: .875rem; /* 14px */
    --ui-font-label: .875rem; /* 14px */
    --ui-font-help: .875rem; /* 14px */
    --ui-font-action: 1rem; /* 16px */
    --ui-font-metric: 3rem; /* 48px */
    --ui-section-block: var(--ui-space-20);
    --ui-gap-section-content: var(--ui-space-8);
    --ui-card-padding: var(--ui-space-6);
    --ui-gutter: 1.5rem;
    --ui-split-gap: var(--ui-space-8);
    --ui-avatar-primary-width: clamp(17rem, 44vw, 23rem);
    --ui-avatar-secondary-width: clamp(13rem, 34vw, 19rem);
    --ui-avatar-integrated-width: clamp(11rem, 38%, 16rem);
  }

  :root:root .ui-split:not(.ui-split--retain-tablet) { grid-template-columns: minmax(0, 1fr); }
  .ui-media--avatar-secondary-compact { --ui-avatar-secondary-width: 12.8125rem; }
}

/* Móvil */
@media (max-width: 760px) {
  :root {
    --ui-font-display: 2.625rem; /* 42px */
    --ui-font-page-h1: 2.375rem; /* 38px */
    --ui-font-section-h2: 2.125rem; /* 34px */
    --ui-font-task-h2: 1.5rem; /* 24px */
    --ui-font-card-h3: 1.25rem; /* 20px */
    --ui-font-lead: 1.0625rem; /* 17px */
    --ui-font-body: 1rem; /* 16px */
    --ui-font-small: .875rem; /* 14px */
    --ui-font-label: .875rem; /* 14px */
    --ui-font-help: .875rem; /* 14px */
    --ui-font-action: 1rem; /* 16px */
    --ui-font-metric: 2.625rem; /* 42px */
    --ui-section-block: var(--ui-space-16);
    --ui-gap-card: var(--ui-space-4);
    --ui-card-padding: var(--ui-space-6);
    --ui-gutter: 1rem;
    --ui-split-gap: var(--ui-space-6);
    --ui-avatar-primary-width: min(82vw, 20rem);
    --ui-avatar-secondary-width: min(68vw, 16rem);
    --ui-avatar-integrated-width: min(42%, 11rem);
    --ui-visual-icon-size: 3rem;
  }

  .ui-button { width: 100%; }
  .ui-media--avatar-secondary-compact { --ui-avatar-secondary-width: 7.25rem; }
  :root:root .ui-split { grid-template-columns: minmax(0, 1fr); }
  .ui-media,
  .ui-media__frame { width: 100%; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-button { transition: none; }
  .ui-button.is-loading::after,
  .ui-button[aria-busy="true"]::after { animation-duration: 1.6s; }
}